<template>
  <div id="views">
    <section class="set2">
      <ul>
        <li v-for="(item,index) in data">
          <div class="child twoDrug">
            <div class="p1">
              <span class="machineName">
                {{item.name}}({{item.cnyPrice}}<span class="unit">CNY</span> / {{item.usdtPrice}}<span class="unit">USDT</span>)
              </span>
            </div>
            <p class="drugTime">开挖时间：{{item.time_income}}</p>
            <p class="p3">
              <span>单份合约算力&nbsp;&nbsp;{{item.base_power}}T+{{item.more_power_percent}}%</span>
            </p>
            <button class="setting" @click="place(item.machine_id)">立即下单</button>
          </div>
        </li>
      </ul>
      <p class="loadToast">{{loadToastInfo}}</p>
    </section>
  </div>
</template>
<script>
  import { machineList } from '../../http/api'
  export default {
      name:'power_list',
      data(){
          return{
              introduce:'算力列表',
              loadToastInfo : '加载中...',
              page : 0,
              totalPage : 1,
              data :[]
          }
      },
      methods:{
          loadlist( page ){
            let thiz = this;
            this.loadToastInfo = '加载中...';
            machineList({page:page}).then(res =>{
              if( res.code == 200 ){
                this.page++;
                this.totalPage = 1;
                let lists = res.data.list;//列表
                for( let i = 0 ; i < lists.length ; i++ ){
                  let good_deposit = lists[i].good_deposit;//商品，各个币种的单价
                  for( let h = 0 ; h < good_deposit.length ; h++ ){
                    let curName = good_deposit[h].pay_currency;
                    let price = good_deposit[h].goods_deposit;
                    if( curName == 'USDT' ){
                      lists[i].usdtPrice = Number(price);//设置usdt单价
                    }
                    if( curName == 'CNY' ){
                      lists[i].cnyPrice = Number(price);//设置cny单价
                    }
                  }
                }
                thiz.data = lists;
                thiz.loadToastInfo = '到底了...';
                if( lists.length == 0 ){
                  thiz.loadToastInfo = '暂无数据...';
                }
              }
            }).catch(err => {
              this.loadToastInfo = '到底了...';
            });
          },
          place( id ){
              /*点击支付*/
              this.$router.push({path:'/place_order', query:{machine_id : id }})
          }
      },
      mounted(){
         this.loadlist(this.page);
      },
  }
</script>
<style type="text/less" lang="less" scoped>
  #views{padding-bottom: 1.28rem}
  .set2{
    padding:0 0.3rem 0rem 0.3rem;
    li{
      padding-top: 0.3rem;
      >div{
        .p1{overflow: hidden}
        background: #fff;border-radius: 0.04rem;overflow: hidden;padding: 0.34rem 0.24rem;position: relative;text-align: left;padding-bottom: 0.43rem;
        .machineName{
          font-size: 0.32rem;float: left;line-height: 0.35rem;
          .unit{font-size: 0.25rem;}
        }
        .machineStatus{float: right;font-size: 0.28rem;line-height: 0.35rem;}
        .isRun{color: #2FC68F;}/*开挖中*/
        .isStop{color:#ED5A5A;}
      }
      .drugTime{color: #9B9B9B;line-height: 100%;padding-top: 0.22rem;padding-bottom: 0.4rem;font-size: 0.26rem}
      .setting{position: absolute;z-index: 1;right:0.24rem;bottom: 0.3rem;height: 0.6rem;border-radius: 1rem;font-size: 0.26rem;background: #ffd203;padding:0 0.3rem}
      .p3{
        font-size: 0.28rem;color:#4b4b4b;
      }
    }
  }
  .loadToast{padding:0.3rem 0}
</style>
